<!--
    组件说明：
        props：
            rowData -- 修改行数据
            isShowDialog -- 对象中有 value 值控制弹窗
-->
<template>
  <div>
        <el-dialog
        title="修改中"
        :visible.sync="isShowDialog.value"
        width="30%"
        center
        @open="handleOpen"
        >

            <!-- 表单 begin -->
            <el-form :model="alterParmeter">
                <el-form-item label="证书有效期" :label-width="formLabelWidth">
                    <el-input v-model="alterParmeter.effectiveDate"></el-input>
                </el-form-item>
                 <el-form-item label="投入品id" :label-width="formLabelWidth">
                    <el-input v-model="alterParmeter.goodsId"></el-input>
                </el-form-item>
                <el-form-item label="id" :label-width="formLabelWidth">
                    <el-input v-model="alterParmeter.id"></el-input>
                </el-form-item>
                <el-form-item label="证书名称" :label-width="formLabelWidth">
                    <el-input v-model="alterParmeter.name"></el-input>
                </el-form-item>
                <el-form-item label="证书编号" :label-width="formLabelWidth">
                    <el-input v-model="alterParmeter.number"></el-input>
                </el-form-item>
                <el-form-item label="证书图片" :label-width="formLabelWidth">
                    <el-upload
                    class="upload-demo"
                    action="http://120.77.156.205:9610/file/upload"
                    :on-success="submitSuccess"
                    list-type="picture">
                        <el-button size="small" type="primary">{{ submitPictureMark? "重新上传": "点击上传" }}</el-button>
                        <div slot="tip" class="el-upload__tip">{{ submitPictureMark? "图片上传成功": "点击上传证书图片"}}</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="认证类型" :label-width="formLabelWidth">
                    <el-input v-model="alterParmeter.type"></el-input>
                </el-form-item>
            </el-form>
            <!-- 表单 end -->

            <!-- button begin -->
            <span slot="footer" class="dialog-footer">
                    <el-button @click="isShowDialog.value = false">取 消</el-button>
                    <el-button type="primary" @click="alterData"  v-auth="'breed_warn_update'">确 定</el-button>
            </span>
            <!-- button end -->
        </el-dialog>
  </div> 
</template>

<script>
// API 
import { alterCertificateData } from "../../../../Api/productionmanage/warning/supplierWarning"

export default {
    name: 'AlterCertificate',

    inject: ["reload"],

    props: {
        rowData: Object,
        isShowDialog: Object,
    },
    data() {
        return {

            // 控制图片上传成功后提示语切换
            submitPictureMark: false,

            // 表单标题宽度
            formLabelWidth: "120px",

            // 修改参数
            alterParmeter: {},
        }
    },
    methods: {
        // 图片上传成功回调
        submitSuccess(r) {
            console.log(r);

            if(r.flag == true) {
                this.submitPictureMark = true

                this.alterParmeter.picture = JSON.parse(r.data).url
            }
        },

        // 弹窗打开回调
        handleOpen() {
            this.alterParmeter = {
                effectiveDate: this.rowData.effectiveDate,
                goodsId: this.rowData.goodsId,
                id: this.rowData.id,
                name: this.rowData.name,
                number: this.rowData.number,
                picture: this.rowData.picture,
                type: this.rowData.type
            }
        },

        // 确定按钮回调
        alterData() {
            console.log(this.alterParmeter,'修改参数');
            alterCertificateData(this.alterParmeter).then( (res) => {
                console.log(res)
                if (res.data.flag === true) {
                    this.reload()

                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                } else {
                    this.$message({
                            type: 'error',
                            message: '修改失败'
                        })
                }
            } )
            this.isShowDialog.value = false
        }
    }
}
</script>

<style>

</style>